<template>
  <div class="schedule">
    <h2 class="title">{{currentDate}} —— {{currentDay}}</h2>
    <h2 class="title">当前周次: {{weekIndex + 1}}</h2>
    <el-row>
      <el-col :span="12">
        <el-cascader
          v-model="weekly"
          :options="options"
          @change="handleChange"
        />
      </el-col>
    </el-row>
    <el-table :data="scheduleData[weekly]" style="width: 100%" stripe highlight-current-row>
      <el-table-column fixed label="#" width="80" prop="index" align="center"/>

      <el-table-column label="星期一" align="center">
        <template #default="scope">
          <div>{{ scope.row.Monday.name }}</div>
          <div>{{ scope.row.Monday.teacher }}</div>
          <div>{{ scope.row.Monday.address }}</div>
        </template>
      </el-table-column>

      <el-table-column prop="Tuseday" label="星期二" align="center">
        <template #default="scope">
          <div>{{ scope.row.Tuseday.name }}</div>
          <div>{{ scope.row.Tuseday.teacher }}</div>
          <div>{{ scope.row.Tuseday.address }}</div>
        </template>
      </el-table-column>

      <el-table-column prop="Wednesday" label="星期三" align="center">
        <template #default="scope">
          <div>{{ scope.row.Wednesday.name }}</div>
          <div>{{ scope.row.Wednesday.teacher }}</div>
          <div>{{ scope.row.Wednesday.address }}</div>
        </template>
      </el-table-column>

      <el-table-column prop="Thursday" label="星期四" align="center">
        <template #default="scope">
          <div>{{ scope.row.Thursday.name }}</div>
          <div>{{ scope.row.Thursday.teacher }}</div>
          <div>{{ scope.row.Thursday.address }}</div>
        </template>
      </el-table-column>

      <el-table-column prop="Friday" label="星期五" align="center">
        <template #default="scope">
          <div>{{ scope.row.Friday.name }}</div>
          <div>{{ scope.row.Friday.teacher }}</div>
          <div>{{ scope.row.Friday.address }}</div>
        </template>
      </el-table-column>

      <el-table-column prop="Saturday" label="星期六" align="center">
        <template #default="scope">
          <div>{{ scope.row.Saturday.name }}</div>
          <div>{{ scope.row.Saturday.teacher }}</div>
          <div>{{ scope.row.Saturday.address }}</div>
        </template>
      </el-table-column>

      <el-table-column prop="Sunday" label="星期日" align="center">
        <template #default="scope">
          <div>{{ scope.row.Sunday.name }}</div>
          <div>{{ scope.row.Sunday.teacher }}</div>
          <div>{{ scope.row.Sunday.address }}</div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import scheduleData from "./data/schedule-data";
import { options } from "./data/base-data";
import { weekIndex } from "./hooks/useGetWeekIndex"
import { currentDate, currentDay } from "./hooks/useGetCurrentTime" 
const weekly = ref(0);

const handleChange = (value: number) => {
  weekly.value = value;
};
onMounted(() => {
  weekly.value = weekIndex;
});
</script>

<style scoped>
.title {
  text-align: center;
  box-shadow: 0 0 5px red;
}
</style>
